<template>
	<view class="page">
		<view class="nav flex_center">

			<view class="back">
				<u-icon name="arrow-left" size="40rpx" @click="$native.backAction()"></u-icon>
				<!--  -->
			</view>

			<view class="search flex_r_around">
				<u-search :showAction="true" actionText="搜索" :actionStyle="{
					width: '120rpx',
					height: '56rpx',
					background: '#FD2A53',
					borderRadius: '36rpx',
					fontWeight: '500',
					fontSize: '24rpx',
					color: '#FFFFFF',
					lineHeight: '56rpx',
					textAlign: 'center',
				}" :animation="false" @search="onSearch" @custom="onSearch" v-model="key"></u-search>
			</view>

			<view class="back" @click="show_select = true">
				<image :src="$util.prefix('store/icon_screen.png')"></image>
			</view>
		</view>

		<view class="nav_box" :id="type == 4 ? 'nopadding' : ''"></view>

		<view class="type">
			<u-tabs :list="type_list" @click="onType" lineColor="#FD2A53" :activeStyle="{
				color: '#FD2A53',
				fontWeight: 'bold',
			}"></u-tabs>
		</view>

		<view class="tab" v-if="type != 4">
			<scroll-view scroll-x="true">
				<view class="flex_center">
					<view class="tab-item" @click="onTab(0)" :id="status == 0 ? 'select' : ''">全部</view>
					<view class="tab-item" @click="onTab(2)" :id="status == 2 ? 'select' : ''">
						待接单{{ pendingOrders ? `(${pendingOrders})` : ''  }}</view>
					<view class="tab-item" @click="onTab('3,4')" :id="status == '3,4' ? 'select' : ''">
						已接单{{ receivedOrders ? `(${receivedOrders})` : ''  }}</view>
					<view class="tab-item" @click="onTab('5,6')" :id="status == '5,6' ? 'select' : ''">已完成</view>
					<view class="tab-item" @click="onTab(11)" :id="status == 11 ? 'select' : ''">售后</view>
				</view>
			</scroll-view>
		</view>

		<empty v-if="type == 4 && leyoutotal==0"></empty>

		<empty v-if="type != 4 && total==0"></empty>

		<!-- 按摩订单 -->
		<view class="container" v-if="type == 2">
			<view class="list" v-for="(item,index) in list" :key="index"
				@click="$util.toUrl(`/pages/order/content?id=${item.id}`)">
				<view class="flex_center">
					<view class="image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="name flex_center">
							<text>{{ item.name }}</text>
							<view>
								{{
									item.return_status == 2 ? '退款申请中'
									: item.return_status == 3 ? '已退款'
									: item.return_status == 4 ? '退款驳回'
									: item.return_status == 5 ? '商家同意退款'
									: item.status == 5 ? '已完成'
									: item.status == 1 ? '待支付'
									: item.status == 2 ? '待接单'
									: item.status == 3 ? '待使用'
									: item.status == 4 ? '待使用'
									: item.status == 6 ? '已评价'
									: item.status == 7 ? '已退款'
									: ''
								}}
							</view>
						</view>

						<view class="time flex_center">
							<view>
								<text>下单时间:</text>
								<uni-dateformat :date="item.create_time" format="yyyy-MM-dd hh:mm"></uni-dateformat>
							</view>

							<i>￥{{ item.pay_price }}</i>
						</view>
					</view>
				</view>

				<view class="btn-box flex_center">

					<!-- 待支付 -->
					<view class="border-btn red flex_r_around" v-if="item.status == 1" @click.stop="onPay(item)">
						<text>立即支付</text>
					</view>

					<view class="border-btn flex_r_around" v-if="item.status == 1" @click.stop="closeOrder(item)">
						<text>取消订单</text>
					</view>

					<!-- 待接单 -->
					<view class="border-btn flex_r_around"
						v-if="item.status == 2 && (item.return_status == 1 || item.return_status == 4)"
						@click.stop="onReturn(item)">
						<text>申请退款</text>
					</view>

					<!-- 已接单 -->
					<view class="border-btn red flex_r_around" v-if="item.status == 3 || item.status == 4"
						@click.stop="complateOrder(item)">
						<text>完成订单</text>
					</view>

					<view class="border-btn flex_r_around"
						v-if="(item.status == 3 || item.status == 4) && (item.return_status == 1 || item.return_status == 4)"
						@click.stop="onReturn(item)">
						<text>申请退款</text>
					</view>

					<!-- 已完成 -->
					<view class="border-btn flex_r_around" v-if="item.status == 5 || item.status == 5"
						@click.stop="$native.toComplate(item.id)">
						<text>投诉</text>
					</view>

				</view>
			</view>
		</view>

		<!-- 到店使用 -->
		<view class="container" v-if="type == 1">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="flex_center">
					<view class="image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="name flex_center">
							<text>{{ item.name }}</text>
							<view>
								{{
									item.return_status == 2 ? '退款申请中'
									: item.return_status == 3 ? '已退款'
									: item.return_status == 4 ? '退款驳回'
									: item.return_status == 5 ? '商家同意退款'
									: item.status == 5 ? '已完成'
									: item.status == 1 ? '待支付'
									: item.status == 2 ? '待接单'
									: item.status == 3 ? '待使用'
									: item.status == 4 ? '待使用'
									: item.status == 6 ? '已评价'
									: item.status == 7 ? '已退款'
									: ''
								}}
							</view>
						</view>

						<view class="time flex_center">
							<view>
								<text>下单时间:</text>
								<uni-dateformat :date="item.create_time" format="yyyy-MM-dd hh:mm"></uni-dateformat>
							</view>

							<i>￥{{ item.pay_price }}</i>
						</view>
					</view>
				</view>

				<view class="btn-box flex_center">

					<!-- 待支付 -->
					<view class="border-btn flex_r_around" v-if="item.status == 1" @click.stop="onPay(item)">
						<text>立即支付</text>
					</view>

					<view class="border-btn red flex_r_around" v-if="item.status == 1" @click.stop="closeOrder(item)">
						<text>取消订单</text>
					</view>

					<!-- 待接单 -->
					<view class="border-btn flex_r_around" v-if="item.status == 2" @click.stop="onReturn(item)">
						<text>申请退款</text>
					</view>

					<!-- 已接单 -->
					<view class="border-btn red flex_r_around" v-if="item.status == 3 || item.status == 4"
						@click="$util.toUrl(`/pages/order/arrival?order_id=${item.id}&lat=${lat}&lng=${lng}`)">
						<text>核销</text>
					</view>

					<view class="border-btn flex_r_around"
						v-if="(item.status == 3 || item.status == 4) && (item.return_status == 1 || item.return_status == 4)">
						<text>申请退款</text>
					</view>

					<!-- 已完成 -->
					<view class="border-btn flex_r_around" v-if="item.status == 5 || item.status == 5"
						@click.stop="$native.toComplate(item.id)">
						<text>投诉</text>
					</view>

				</view>
			</view>
		</view>

		<!-- 购物订单 -->
		<view class="container" v-if="type == 3">
			<view class="list" v-for="(item,index) in list" :key="index"
				@click="$util.toUrl(`/pages/order/content?id=${item.id}`)">
				<view class="flex_center">
					<view class="image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="name flex_center">
							<text>{{ item.name }}</text>
							<view>
								{{
									item.return_status == 2 ? '退款申请中'
									: item.return_status == 3 ? '已退款'
									: item.return_status == 4 ? '退款驳回'
									: item.return_status == 5 ? '商家同意退款'
									: item.status == 5 ? '已完成'
									: item.status == 1 ? '待支付'
									: item.status == 2 ? '待接单'
									: item.status == 3 ? '待发货'
									: item.status == 4 ? '待收货'
									: item.status == 6 ? '已评价'
									: item.status == 7 ? '已退款'
									: ''
								}}
							</view>
						</view>

						<view class="time flex_center">
							<view>
								<text>下单时间:</text>
								<uni-dateformat :date="item.create_time" format="yyyy-MM-dd hh:mm"></uni-dateformat>
							</view>

							<i>￥{{ item.pay_price }}</i>
						</view>
					</view>
				</view>

				<view class="btn-box flex_center">

					<!-- 待支付 -->
					<view class="border-btn red flex_r_around" v-if="item.status == 1" @click.stop="onPay(item)">
						<text>立即支付</text>
					</view>

					<view class="border-btn red flex_r_around" v-if="item.status == 1" @click.stop="closeOrder(item)">
						<text>取消订单</text>
					</view>

					<!-- 待接单 -->
					<view class="border-btn flex_r_around" v-if="item.status == 2" @click.stop="onReturn(item)">
						<text>申请退款</text>
					</view>

					<!-- 已接单 -->
					<view class="border-btn red flex_r_around" v-if="item.status == 4"
						@click.stop="complateOrder(item)">
						<text>确认收货</text>
					</view>

					<view class="border-btn flex_r_around"
						v-if="(item.status == 3 || item.status == 4) && (item.return_status == 1 || item.return_status == 4)"
						@click.stop="onReturn(item)">
						<text>申请退款</text>
					</view>

					<!-- 已完成 -->
					<view class="border-btn flex_r_around" v-if="item.status == 5 || item.status == 5"
						@click="$native.toComplate(item.id)">
						<text>投诉</text>
					</view>

				</view>
			</view>
		</view>

		<!-- 活动订单 -->
		<view class="container" v-if="type == 4">
			<view class="list" v-for="(item,index) in leyoulist" :key="index" @click="toActiveContent(item)">
				<view class="flex_center">
					<view class="image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="name flex_center">
							<text>{{ item.title }}</text>
							<view v-if="item.complain_status != 2 && item.complain_status != 3">
								{{
									item.status == 1 ? '未支付'
									: item.return_status == 2 ? '申请退款'
									: item.return_status == 3 ? '已退款'
									: item.return_status == 4 ? '拒绝退款'
									: item.status == 2 ? '已报名'
									: item.status == 3 ? '已查看'
									: item.status == 4 ? '已退款'
									: ''
								}}
							</view>
						</view>

						<view class="time flex_center">
							<view v-if="item.end_time">
								<text>有效期至：</text>
								<uni-dateformat :date="item.end_time * 1000" format="yyyy-MM-dd hh:mm"></uni-dateformat>
							</view>

							<view v-else>
								<text>无限期</text>
							</view>
							<i v-if="Number(item.pay_num) == 0">免费</i>
							<i v-else>￥{{ item.pay_num }}</i>
						</view>
					</view>
				</view>

				<view class="btn-box flex_center"
					v-if="(item.status == 2 || item.status == 3) && (item.return_status == 1 || item.return_status == 4) && Number(item.pay_num) > 0">
					<view class="border-btn flex_r_around" @click.stop="returnActive(item)" v-if="getShowStatus(item)">
						<text>申请退款</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单筛选 -->
		<u-popup :safeAreaInsetBottom="false" :show="show_select" @close="show_select = false" bgColor="transparent">
			<view class="select_box">
				<view class="header flex_r_between">
					<view class="icon flex_r_between">

					</view>
					<text>订单筛选</text>
					<view class="icon flex_r_between" @click="show_select = false">
						<u-icon name="close" color="#131313" size="40rpx"></u-icon>
					</view>
				</view>

				<view class="title">下单时间</view>
				<view class="time_box flex_r_between">
					<view class="time_item" @click="start_show = true">
						<uni-dateformat :date="start" format="yyyy-MM-dd" v-if="start"></uni-dateformat>
						<text v-else>起始时间</text>
					</view>
					<view class="line"></view>
					<view class="time_item" @click="onEnd">
						<uni-dateformat :date="end" format="yyyy-MM-dd" v-if="end"></uni-dateformat>
						<text v-else>截止时间</text>
					</view>
				</view>


				<!-- <view class="title">商品类别</view>
				<view class="time_box flex_r_between">
					<view class="time_item hidden" @click="show = true">{{ category_pname || '请选择' }}</view>
					<view class="line"></view>
					<view class="time_item hidden" @click="show = true">{{ category_name || '请选择' }}</view>
				</view> -->

				<view class="btn_box flex_r_between">
					<view class="btn_item cancel" @click="onResetSelect">重置</view>
					<view class="btn_item confirm" @click="onConfirmSelect">确定</view>
				</view>

			</view>
		</u-popup>

		<u-picker keyName="name" :show="show" ref="uPicker" :columns="columns" @cancel="show = false"
			@close="show = false" @change="onColumnsChange" @confirm="onColumnsComfirm" :closeOnClickOverlay="true">
		</u-picker>

		<u-datetime-picker :show="start_show" mode="date" :maxDate="now" :closeOnClickOverlay="true"
			@close="start_show = false" @cancel="start_show = false" @confirm="confirmStart">
		</u-datetime-picker>

		<u-datetime-picker :maxDate="now" :minDate="start" :show="end_show" mode="date" :closeOnClickOverlay="true"
			@close="end_show = false" @cancel="end_show = false" @confirm="confirmEnd">
		</u-datetime-picker>

		<u-popup :safeAreaInsetBottom="false" mode="bottom" :show="to_pay_show" @close="to_pay_show = false"
			bgColor="transparent">
			<view class="to_pay_show flex_c">
				<view class="title">支付</view>
				<view class="price flex_center" style="align-items: flex-start;">
					<i>￥</i>
					<view class="flex_c" v-if="vip_status == 1 && circle_info.type == 3">
						<text>{{ (pay_item.service_price * goods_discount).toFixed(2) }}</text>
						<text
							style="font-size: 28rpx;color: #FD2A53;margin-top: 12rpx;">VIP优惠:{{ (pay_item.service_price * (1-goods_discount)).toFixed(2) }}</text>
					</view>
					<text v-else>{{ pay_item.service_price }}</text>
				</view>
				<view class="pay_type">

					<view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>

					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
						</view>
					</view>


				</view>
				<view class="btn" @click="toPay">确认支付</view>
			</view>
		</u-popup>

		<u-popup :safeAreaInsetBottom="false" :show="show_return" mode="center" @close="show_return = false"
			bgColor="transparent">
			<view class="return_popup">
				<view class="icon flex_r_around">
					<image :src="$util.prefix('store/money_icon.png')"></image>
				</view>

				<view class="content flex_c">

					<view class="title">申请退款</view>

					<view class="text">
						退款将退回到收益中，请到收益中查看
					</view>

					<view class="return_popup_btn flex_r_between">
						<view class="b" @click="returnOrder">
							继续申请
						</view>
						<view class="r" @click="show_return = false">
							取消
						</view>
					</view>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty,
		},
		data() {
			return {
				show_select: false,

				total: 1,
				page: 1,
				list: [],
				key: '',
				status: 0,

				leyoutotal: 1,
				leyoupage: 1,
				leyoulist: [],

				start_show: false,
				end_show: false,
				start: 0,
				end: 0,
				now: 0,

				show: false,
				category_pid: 0,
				category_pname: '',
				category_id: 0,
				category_name: '',
				// 产品分类
				columns: [
					[],
					[]
				],

				type: 2,
				// 1自取 2上门 3邮寄
				type_list: [{
						name: '上门服务',
						type: 2,
						disabled: false,
						badge: {
							value: 0
						}
					},

					{
						name: '到店使用',
						type: 1,
						disabled: false,
						badge: {
							value: 0
						}
					},

					{
						name: '网购邮寄',
						type: 3,
						disabled: false,
						badge: {
							value: 0
						}
					},
					{
						name: '活动',
						type: 4,
						disabled: false,
						badge: {
							value: 10
						}
					},
				],

				// 支付模块
				to_pay_show: false,
				vip_status: 0,
				circle_info: {},
				goods_discount: 0,
				pay_item: {},
				pay_type: 2,

				// 退款
				show_return: false,
				return_item: {},

				num: 0,
				// 待接单
				pendingOrders: 0,
				// 已接单
				receivedOrders: 0,

				lat: 0,
				lng: 0,
			}
		},
		methods: {
			onSearch() {
				this.refreshList();
			},

			onTab(e) {
				this.status = e;
				this.refreshList();
			},

			onType(e) {
				this.type = e.type;
				this.refreshList();
			},

			refreshList() {
				this.getUserOrderNum();
				if (this.type != 4) {
					this.page = 1;
					this.total = 1;
					this.list = [];
					this.getList();
				} else {
					this.leyoupage = 1;
					this.leyoutotal = 1;
					this.leyoulist = [];
					this.getApplyLog();
				}
			},

			getList() {
				if (this.start == 0 || this.end == 0) {
					var time = ``
				} else {
					var time =
						`${uni.$u.timeFormat(this.start, 'yyyy-mm-dd hh:MM:ss')} - ${uni.$u.timeFormat(this.end, 'yyyy-mm-dd hh:MM:ss')}`
				}
				this.$post('/order/getOrderList', {
					time: time,
					status: this.status,
					category_pid: this.category_pid,
					category_id: this.category_id,
					key: this.key,
					page: this.page,
					type: this.type
				}, true, () => {
					uni.stopPullDownRefresh();
				}).then(res => {
					uni.stopPullDownRefresh();
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			getApplyLog() {
				this.$post('/loyou/getApplyLog', {
					page: this.leyoupage,
					type: 0,
				}, true, () => {
					uni.stopPullDownRefresh();
				}).then(res => {
					uni.stopPullDownRefresh();
					this.leyoutotal = res.data.total;
					this.leyoulist.push(...res.data.data);
				})
			},

			// 是否展示活动退款
			getShowStatus(item) {
				var now = new Date();
				var end_time = item.end_time * 1000;
				if (end_time <= now) {
					return false;
				} else {
					return true;
				}
			},

			// 活动退款
			returnActive(item) {
				this.$util.toUrl(`/pages/order/activereturn?leyou_id=${item.id}&apply_id=${item.apply_id}`);
			},

			// 活动详情
			toActiveContent(item) {
				this.$util.toUrl(`/pages/order/activecontent?id=${item.apply_id}`)
			},

			getProductTags() {
				this.$get('/category/getGoodsType').then(res => {
					this.storeType = res.data;
					res.data.forEach((element) => {
						this.columns[0].push({
							"name": element.name,
							"pid": element.pid,
							"id": element.id,
						});
					})
					this.columns[1] = res.data[0].child;
				})
			},

			onColumnsComfirm(e) {
				this.category_pname = e.value[0].name;
				this.category_name = e.value[1].name;
				this.category_pid = e.value[0].id;
				this.category_id = e.value[1].id;
				this.kefu = e.value[1].kefu;
				this.show = false;
			},

			onColumnsChange(e) {
				if (e.columnIndex == 0) {
					var picker = this.$refs.uPicker;
					picker.setColumnValues(1, this.storeType[e.index].child)
				}
			},

			onEnd() {
				if (!this.start) {
					return this.$util.msg('请先选择开始时间')
				}
				this.end_show = true;
			},

			confirmStart(e) {
				this.start = e.value;
				this.start_show = false;
			},

			confirmEnd(e) {
				this.end = e.value;
				this.end_show = false;
			},

			onConfirmSelect() {
				this.refreshList();
				this.start_show = false;
				this.end_show = false;
				this.show_select = false;
			},

			onResetSelect() {
				this.start = 0;
				this.end = 0;
				this.category_pid = 0;
				this.category_id = 0;
				this.key = '';
				this.refreshList();
				this.start_show = false;
				this.end_show = false;
				this.show_select = false;
			},

			// 订单支付 获取VIP信息
			// 支付相关
			onPay(item) {
				this.pay_item = item;
				this.$get('/circle.circle_vip/getAnmoVipConfig', {
					circle_id: this.pay_item.circle_id
				}).then(res => {
					this.to_pay_show = true;
					this.vip_status = 0;
					var is_vip = res.data.member_info.is_vip || 0;
					var config_type = res.data.member_info.config_type || 0;
					this.circle_info = res.data.circle_info;
					this.goods_discount = res.data.goods_discount / 100;

					if (is_vip == 1) {
						this.vip_status = 1;
					}
				});
			},

			toPay() {
				this.order_id = this.pay_item.id;;
				this.$native.orderPay({
					order_id: this.order_id,
					pay_type: this.pay_type,
					type: 1
				});
			},

			paySuccess() {
				this.to_pay_show = false;
				this.flag = true;
				this.fare = '';
				this.to_pay_last = false;
				this.getPayStatus();
			},

			payFail() {
				this.$util.msg('用户取消支付');
				this.flag = true;
				this.to_pay_last = false;
			},

			getPayStatus() {
				this.$post('/pay/get_pay_status', {
					order_id: this.order_id,
					// type 4 推广
					type: 1,
				}, false, () => {
					this.refreshList();
				}).then(res => {
					this.refreshList();
				});
			},

			getPayStatusAgain() {
				this.$post('/pay/get_pay_status', {
					order_id: this.order_id,
					// type 4 推广
					type: 1,
				}, false);
			},

			// 取消订单
			closeOrder(item) {
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: model => {
						if (model.confirm) {
							this.$get('/order/closeOrder', {
								order_id: item.id,
							}).then(res => {
								this.refreshList();
							})
						}
					}
				})
			},

			// 退款
			onReturn(item) {
				this.return_item = item;
				this.show_return = true;
			},

			returnOrder() {
				this.show_return = false;
				this.$util.toUrl(
					`/pages/order/returnorder?order_id=${this.return_item.id}&store_id=${this.return_item.store_id}`);
			},

			// 完成订单
			complateOrder(item) {
				this.order_id = item.id;
				uni.showModal({
					title: '提示',
					content: '请确保收到商品或服务后进行收货',
					success: model => {
						if (model.confirm) {
							this.$get('/order/finishOrder', {
								order_id: item.id
							}).then(res => {
								this.refreshList();
							});
						}
					}
				});
			},

			getUserOrderNum() {
				this.$get('/order/getUserOrderNum').then(res => {
					res.data.forEach(element => {
						if (element.type == 1) {
							this.type_list[1].badge.value = element.num;
						}
						if (element.type == 2) {
							this.type_list[0].badge.value = element.num;
						}
						if (element.type == 3) {
							this.type_list[2].badge.value = element.num;
						}
						if (element.type == 99) {
							this.type_list[3].badge.value = element.num;
						}

						if (element.type == this.type) {
							this.pendingOrders = element.status_nums.pendingOrders;
							this.receivedOrders = element.status_nums.receivedOrders;
						}
					});
				});
			},


		},

		onLoad(option) {
			this.getProductTags();
			this.now = new Date().getTime();
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}

			this.lat = option.lat || 0;
			this.lng = option.lng || 0;

			window.paySuccess = this.paySuccess;
			window.payFail = this.payFail;
			window.getPayStatusAgain = this.getPayStatusAgain;
		},

		onShow() {
			this.refreshList();
		}
	}
</script>

<style lang="less" scoped>
	.nav {
		padding-top: var(--paging-head-top);
		box-sizing: content-box;
		height: 100rpx;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		background: #FFF;
		z-index: 99;

		.search {
			padding-right: 24rpx;
			flex: 1;
			height: 72rpx;
			background: #F3F3F3;
			border-radius: 36rpx;
		}

		.back {
			padding: 10rpx 24rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.nav_box {
		padding-top: var(--paging-head-top);
		height: 304rpx;
		box-sizing: content-box;
	}

	#nopadding {
		height: 204rpx;
	}

	.type {
		height: 100rpx;
		position: fixed;
		top: calc(100rpx + var(--paging-head-top));
		left: 0;
		background: #FFF;
		width: 100vw;
		z-index: 99;
	}

	.tab {
		position: fixed;
		top: calc(200rpx + var(--paging-head-top));
		left: 0;
		background: #FFF;
		z-index: 99;
		width: 100vw;
		padding: 24rpx;
		height: 104rpx;

		.tab-item {
			height: 56rpx;
			background: #F1F1F1;
			border-radius: 12rpx;
			padding: 0 16rpx;
			font-size: 26rpx;
			color: #333333;
			line-height: 56rpx;
			transition: 0.6s;
			margin-right: 16rpx;
		}

		#select {
			background: #FFEAEE;
			color: #FD2A53;
		}
	}

	.container {
		padding: 24rpx 24rpx 10rpx;
		overflow: hidden;

		.list {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

			.image {
				width: 128rpx;
				height: 128rpx;
				background: #D8D8D8;
				border-radius: 12rpx;
				overflow: hidden;
				margin-right: 20rpx;

				image {
					width: 128rpx;
					height: 128rpx;
				}
			}

			.text {
				flex: 1;
				overflow: hidden;

				.name {
					overflow: hidden;
					margin-bottom: 40rpx;

					text {
						flex: 1;
						font-weight: 500;
						font-size: 28rpx;
						color: #131313;
					}

					view {
						font-size: 28rpx;
						color: #FD2A53;
					}
				}

				.time {
					view {
						flex: 1;

						text {
							font-size: 24rpx;
							color: #999999;
						}
					}

					i {
						font-style: normal;
						font-weight: 600;
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}
			}

			.btn-box {
				flex-direction: row-reverse;

				.border-btn {
					border: 2rpx solid #CCCCCC;
					width: 168rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 32rpx;
					margin: 32rpx 0 0 24rpx;
					overflow: hidden;

					text {
						font-size: 28rpx;
						color: #131313;
					}
				}

				.red {
					border: 2rpx solid #FD2A53;

					text {
						color: #FD2A53;
					}
				}
			}
		}
	}

	.select_box {
		padding: 0 32rpx 60rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.header {
			height: 80rpx;

			.icon {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
			}
		}

		.title {
			margin: 48rpx 0 32rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #131313;
		}

		.time_box {
			.time_item {
				width: 312rpx;
				height: 72rpx;
				padding: 0 16rpx;
				background: #F7F7F7;
				border-radius: 36rpx;
				font-size: 28rpx;
				color: #999999;
				text-align: center;
				line-height: 72rpx;
			}

			.line {
				width: 24rpx;
				height: 4rpx;
				background: #CCCCCC;
			}
		}

		.btn_box {
			margin-top: 120rpx;

			.btn_item {
				width: 332rpx;
				height: 88rpx;
				border-radius: 16rpx;
				font-size: 28rpx;
				line-height: 88rpx;
				text-align: center;
			}

			.cancel {
				background: #F1F1F1;
				color: #131313;
			}

			.confirm {
				background: #FD2A53;
				color: #FFF;
			}
		}

	}

	.to_pay_show {
		padding: 32rpx 32rpx 64rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.price {
			margin: 34rpx 0 24rpx;

			i {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
				font-style: normal;
			}

			text {
				font-weight: 500;
				font-size: 64rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.pay_type {
			background: #F8F8F8;
			border-radius: 16rpx;
			width: 100%;
			margin: 0 32rpx 64rpx;

			.item {
				height: 100rpx;
				padding: 0 32rpx;

				.left {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}

				.right {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
						margin-right: 30rpx;
					}
				}
			}
		}

		.btn {
			width: 560rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

	}

	.return_popup {
		.icon {
			position: relative;
			z-index: 2;

			image {
				width: 112rpx;
				height: 112rpx;
			}
		}

		.content {
			width: 616rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			margin-top: -48rpx;
			padding: 88rpx 44rpx 48rpx;

			.title {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}

			.text {
				width: 528rpx;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				text-align: center;
				margin: 24rpx 0 48rpx;
			}

			.return_popup_btn {
				width: 100%;

				view {
					width: 248rpx;
					height: 88rpx;
					border-radius: 44rpx;
					font-size: 28rpx;
					line-height: 88rpx;
					text-align: center;
				}

				.b {
					background: #F1F1F1;
					color: #333333;
				}

				.r {
					background: #FD2A53;
					color: #FFFFFF;
				}

			}
		}


	}
</style>